<template>
  <view
    class="content"
    :style="{
      'padding-top': height + 'px',
    }"
  >
    <view
      :style="{
        height: statusBarHeight + 'px',
      }"
    >
    </view>
    <!-- 头部 -->
    <view
      class="head"
      :style="{
        top: statusBarHeight + 'px',
      }"
    >
      <view class="head_left">
        <u-icon
          name="arrow-left"
          color="#444444"
          size="24"
          :bold="true"
          @click="toBack"
        ></u-icon>
      </view>
      <view class="text">排行榜</view>
    </view>
    <!-- 主体 -->
    <view class="box">
      <view
        class="top"
        :style="'background-image:url(' + detail.bg_img_url + ')'"
      >
        <view class="top_text">{{ detail.title }}</view>
        <view class="top_num">{{ detail.total_people }}人参与</view>
      </view>
      <view class="tab_view">
        <view
          class="tab_view_item"
          :class="selected == 0 ? 'tab_view_item_sel' : ''"
          @click="change(0)"
          >总榜</view
        >
        <view
          class="tab_view_item"
          :class="selected == 1 ? 'tab_view_item_sel' : ''"
          @click="change(1)"
          >今日</view
        >
        <view
          class="tab_view_item"
          :class="selected == 2 ? 'tab_view_item_sel' : ''"
          @click="change(2)"
          >昨日</view
        >
        <view
          class="tab_view_item"
          :class="selected == 3 ? 'tab_view_item_sel' : ''"
          @click="change(3)"
          >本周</view
        >
        <view
          class="tab_view_item"
          :class="selected == 4 ? 'tab_view_item_sel' : ''"
          @click="change(4)"
          >上周</view
        >
      </view>

      <!-- 我的排名 -->
      <view class="tab_mine" v-if="xunDetail.self">
        <view class="tab_mine_item">
          <image :src="xunDetail.self.avatar_url" mode=""></image>
          <view class="tab_mine_name">{{ xunDetail.self.nick_name }}</view>
        </view>
        <view class="tab_mine_item">
          <view
            class="tab_mine_num"
            :class="xunDetail.self.paihang == '未上榜' ? 'tab_mine_num1' : ''"
            >{{ xunDetail.self.paihang }}</view
          >
          <view class="tab_mine_name">排名</view>
        </view>
        <view class="tab_mine_item">
          <view class="tab_mine_num">{{ xunDetail.self.num }}</view>
          <view class="tab_mine_name">打卡次数</view>
        </view>
      </view>
      <!-- 排行榜 -->
      
        <scroll-view
          class="tab_mine2"
          :style="{
            height: scrollHeihgt + 'px',
          }"
          :scroll-y="true"
          @scroll="scroll"
          @scrolltolower="scrolltolower"
          v-if="xunDetail.data && xunDetail.data.length > 0"
        >
          <view
            class="ranking_item"
            :class="index + 1 == xunDetail.data.length ? 'ranking_item1' : ''"
            v-for="(item, index) in xunDetail.data"
            :key="index"
          >
            <view class="ranking_item_view" v-if="item.user">
              <view class="ranking_item_num">{{ ++index }}</view>
              <view class="ranking_item_img">
                <image
                  :src="item.user.avatar_url"
                  mode=""
                  class="head_img"
                ></image>
              </view>
              <view class="ranking_item_name">{{ item.user.nick_name }}</view>
            </view>
            <view class="ranking_item_number">{{ item.num }}次</view>
          </view>
        </scroll-view>
      </view>
	  <floatingBall></floatingBall>
  </view>
</template>
  
  <script>
import collect from "@/components/collect.vue"; // 收藏、
import progressBar from "@/pages/components/progress_bar.vue"; //录音
export default {
  components: {
    collect,
    progressBar,
  },
  data() {
    return {
      title: "",
      statusBarHeight: 0,
      scrollHeihgt: 0,
      height: 0,
      selected: 0,
      list: [],
      detail: {},
      xunDetail: {},
      page:1,
      last_page:0
    };
  },
  onLoad(options) {
    this.detail = JSON.parse(options.detail);
    this.getRanking(0);
  },
  created() {
    // const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度
    // this.statusBarHeight = statusBarHeight.statusBarHeight;
    // this.$nextTick(() => {
    //   uni
    //     .createSelectorQuery()
    //     .select(".head")
    //     .boundingClientRect((data) => {
    //       this.height = data.height;
    //     })
    //     .exec();
    // });
  },
  methods: {
    getHieght() {
      const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度
      const windowHeihgt = statusBarHeight.windowHeight;
      this.statusBarHeight = statusBarHeight.statusBarHeight;
      this.$nextTick(() => {
        const query = uni.createSelectorQuery().in(this);
        query.select(".head").fields({
          size: true,
        });
        query.select(".top").fields({
          size: true,
        });
        query.select(".tab_view").fields({
          size: true,
        });
        query.select(".tab_mine").fields({
          size: true,
        });

        query.exec((data) => {
          let sum = 0;
          data.forEach((item) => {
            sum += item.height;
          });
          this.height = data[0].height;
          this.scrollHeihgt = windowHeihgt - sum - this.statusBarHeight -59;
          console.log(data, "各种高度");
          console.log(this.scrollHeihgt, "滚动高度");
        });
      });
    },
    toBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    change(num) {
      this.page = 1
      this.last_page = 0
      this.selected = num;
      this.getRanking(num);
    },
    // 获取排行
    getRanking(type) {
      this.$http
        .xunlianyingPaihang({ id: this.detail.id, type: type,page:this.page })
        .then((res) => {
          
          
          if(res.data.data.current_page == 1){
            this.xunDetail = res.data.data;
          } else {
            this.xunDetail.data = this.xunDetail.data.concat(res.data.data.data)
          }
          this.last_page = res.data.data.last_page
          console.log(res.data.data, "训练营详情");
          this.getHieght();
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },
    scroll(){

    },
    scrolltolower() {
      if (this.page == this.last_page || this.last_page == 0) {
      } else {
        this.page++
        this.getRanking(this.selected)
      }
      // console.log("触发");
    },
  },
};
</script>
  
  <style scoped lang="scss">
.content {
  box-sizing: border-box;
}
.head {
  width: 100%;
  padding: 18rpx 30rpx 47rpx;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  z-index: 99;
  background: #ffffff;
  .head_left {
    position: absolute;
    left: 30rpx;
  }

  .head_right {
    position: absolute;
    right: 30rpx;
    color: #55b877;
    font-size: 30rpx;
  }

  .text {
    font-size: 36rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #444444;
  }
}
.box {
  padding: 0 30rpx;
  position: relative;
  .top {
    width: 100%;
    height: 345rpx;
    border-radius: 16rpx;
    // background-image: url("@/static/images/pic_wddc_neirong_tu.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 32rpx;
    box-sizing: border-box;

    .top_text {
      font-size: 36rpx;
      color: #ffffff;
      margin-top: 190rpx;
    }
    .top_num {
      font-size: 28rpx;
      color: #888888;
      margin-top: 16rpx;
    }
  }
  .tab_view {
    background: #f7f8fa;
    border-radius: 36rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40rpx;
    padding: 8rpx 12rpx;
    .tab_view_item {
      padding: 7rpx 34rpx;
      color: #888888;
      font-size: 28rpx;
      border-radius: 32rpx;
    }
    .tab_view_item_sel {
      background: #ffffff;
      color: #272727;
    }
  }
  .tab_mine {
    background: #f7f8fa;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24rpx 52rpx;
    margin-top: 24rpx;
    .tab_mine_item {
      display: flex;
      flex-direction: column;
      align-items: center;
      image {
        width: 88rpx;
        height: 88rpx;
        border-radius: 50%;
      }
      .tab_mine_name {
        font-size: 24rpx;
        color: #444444;
        margin-top: 16rpx;
      }
      .tab_mine_num {
        width: 88rpx;
        height: 88rpx;
        font-size: 50rpx;
        color: #444444;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .tab_mine_num1 {
        font-size: 30rpx;
      }
    }
  }
  .tab_mine2 {
    background: #f7f8fa;
    border-radius: 16rpx;
    padding: 24rpx 52rpx;
    margin-top: 24rpx;
    box-sizing: border-box;
    .ranking_item {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 32rpx;
      .ranking_item_view {
        display: flex;
        align-items: center;
        .ranking_item_num {
          width: 39rpx;
          height: 54rpx;
          font-size: 36rpx;
          color: #444444;
          text-align: center;
          line-height: 54rpx;
        }
        .ranking_item_img {
          width: 80rpx;
          height: 80rpx;
          margin-left: 16rpx;
          image {
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
          }
        }
        .ranking_item_name {
          font-size: 30rpx;
          color: #444444;
          margin-left: 24rpx;
        }
        .ranking_item_number {
          font-size: 26rpx;
          color: #444444;
        }
      }
    }
    .ranking_item1 {
      margin-bottom: 0;
    }
  }
}
</style>